<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Responsive Admin Dashboard Template">
  <meta name="keywords" content="admin,dashboard">
  <meta name="author" content="stacks">
  <!-- The above 6 meta tags *must* come first in the head;any other head content must come *after* these tags --><!-- Title -->
  <title>Circl - Responsive Admin Dashboard Template</title>
  <!-- Styles -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700,800&display=swap" rel="stylesheet">
  <link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet">
  <link href="../plugins/perfectscroll/perfect-scrollbar.css" rel="stylesheet">
  <!-- Theme Styles -->
  <link href="../css/main.min.css" rel="stylesheet">
  <link href="../css/custom.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING:Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="login-page">
<div class='loader'>
  <div class='spinner-grow text-primary' role='status'> <span class='sr-only'>Loading...</span></div>
</div>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-md-12 col-lg-4">
      <div class="card login-box-container">
        <div class="card-body">
          <div class="authent-logo"><img src="../images/logo-new.png" alt=""></div>
          <div class="authent-text">
            <p>服务商超管系统</p>
            <p>Please Sign-in to your account.</p>
          </div>
          <form id="loginForm">
            <div id="errorMsg" class="alert alert-danger mb-3" style="display: none;"></div>
            <div class="mb-3">
              <div class="form-floating">
                <input type="text" pattern="^[a-zA-Z0-9_\\-]{4,30}$" class="form-control" id="floatingInput" placeholder="name@example.com">
                <label for="floatingInput">用户名</label>
              </div>
            </div>
            <div class="mb-3">
              <div class="form-floating">
                <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">密码</label>
              </div>
            </div>
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <div class="d-grid">
              <button type="submit" class="btn btn-info m-b-xs">Sign In</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Javascripts --><script src="../plugins/jquery/jquery-3.4.1.min.js"></script><script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script><script src="https://unpkg.com/feather-icons"></script>
</script><script src="../js/main.min.js"></script>

<script>
  $(function() {
      // 监听表单提交事件
      $('#loginForm').submit(function(e) {
          e.preventDefault(); // 阻止表单默认提交行为

          // 获取用户名和密码
          const username = $('#floatingInput').val().trim();
          const password = $('#floatingPassword').val().trim();

          // 简单验证
          if (!username || !password) {
              alert('用户名和密码不能为空！');
              return;
          }

          // 生成 Basic Auth 的 Base64 编码
          const basicAuth = btoa(`${username}:${password}`);

          // 发送 POST 请求（对应 curl 格式）
          $.ajax({
              url: 'http://localhost:16064/token',
              type: 'POST',
              headers: {
                  'Authorization': `Basic ${basicAuth}`,
                  'Content-Type': 'application/json' // 根据接口要求调整
              },
              dataType: 'json',
              success: function(response) {
                  // 登录成功处理
                  console.log('登录成功', response);
                  const $errorMsg = $('#errorMsg');
                  if(response.code='401'){
                    $errorMsg.text("用户名或密码错误").show();
                   }
                  // 存储 token（假设接口返回 token 字段）
                  if (response.token) {
                      localStorage.setItem('authToken', response.token);
                  }

                  // 跳转到指定页面（例如首页）
                  //window.location.href = 'index.html';
              },
              error: function(xhr, status, error) {
                  // 登录失败处理
                  console.error('登录失败', xhr.responseText || error);
                  alert('登录失败：' + (xhr.responseJSON?.message || '用户名或密码错误'));
              }
          });
      });
  });
</script>

</body>
</html>